<template>
  <div>
    <!-- tab切换表单 -->
    <div>
      <tab-helper :paneList="paneList">

        <!-- 原材料获取 -->
        <div slot="1" class="addProductCarbonAccounting-content">
          <!-- 材料 -->
          <div>
            <div class="addProductCarbonAccounting-title">材料
              <el-button @click="add()" size="small" type="primary" class="addProductCarbonAccounting-btn">添加排放源
              </el-button>
            </div>
            <div class="addProductCarbonAccounting-table">

              <normal-table
                :tableData="tableData1"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel1"
                :operationConfig="operationConfig"
                :operationList="operationList1"
                @event="handleEvent1"
                @changePage="changePage1"></normal-table>
            </div>
          </div>
          <!-- 能耗 -->
          <div>
            <div class="addProductCarbonAccounting-title">能耗
              <el-button @click="add()" size="small" type="primary" class="addProductCarbonAccounting-btn">添加排放源
              </el-button>
            </div>
            <div class="addProductCarbonAccounting-table">

              <normal-table
                :tableData="tableData2"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel2"
                :operationConfig="operationConfig"
                :operationList="operationList2"
                @event="handleEvent2"
                @changePage="changePage2"></normal-table>
            </div>
          </div>
        </div>

        <!-- 生产制造 -->
        <div slot="2" class="addProductCarbonAccounting-content">
          <div>
            <div class="addProductCarbonAccounting-title">
              生产过程
              <el-button @click="addProcess()" size="small" type="primary" class="addProductCarbonAccounting-btn">
                添加工艺
              </el-button>
            </div>
            <div class="addProductCarbonAccounting-table">

              <normal-table
                :tableData="tableData3"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel3"
                :operationConfig="operationConfig"
                :operationList="operationList3"
                @event="handleEvent3"
                @changePage="changePage3"></normal-table>
            </div>
          </div>
          <!-- 运输 -->
          <div>
            <div class="addProductCarbonAccounting-title">运输
              <el-button @click="add()" size="small" type="primary" class="addProductCarbonAccounting-btn">添加排放源
              </el-button>
            </div>
            <div class="addProductCarbonAccounting-table">

              <normal-table
                :tableData="tableData4"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel4"
                :operationConfig="operationConfig"
                :operationList="operationList4"
                @event="handleEvent4"
                @changePage="changePage4"></normal-table>
            </div>
          </div>
        </div>

        <!-- 分销零售 -->
        <div slot="3" class="addProductCarbonAccounting-content">
          <!-- 运输 -->
          <div>
            <div class="addProductCarbonAccounting-title">运输
              <el-button @click="add()" size="small" type="primary" class="addProductCarbonAccounting-btn">添加排放源
              </el-button>
            </div>
            <div class="addProductCarbonAccounting-table">

              <normal-table
                :tableData="tableData4"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel4"
                :operationConfig="operationConfig"
                :operationList="operationList4"
                @event="handleEvent4"
                @changePage="changePage4"></normal-table>
            </div>
          </div>
        </div>

        <!-- 使用 -->
        <div slot="4" class="addProductCarbonAccounting-content">
          <!-- 材料 -->
          <div>
            <div class="addProductCarbonAccounting-title">材料
              <el-button @click="add()" size="small" type="primary" class="addProductCarbonAccounting-btn">添加排放源
              </el-button>
            </div>
            <div class="addProductCarbonAccounting-table">

              <normal-table
                :tableData="tableData4"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel4"
                :operationConfig="operationConfig"
                :operationList="operationList4"
                @event="handleEvent4"
                @changePage="changePage4"></normal-table>
            </div>
          </div>
          <!-- 能耗 -->
          <div>
            <div class="addProductCarbonAccounting-title">能耗
              <el-button @click="add()" size="small" type="primary" class="addProductCarbonAccounting-btn">添加排放源
              </el-button>
            </div>
            <div class="addProductCarbonAccounting-table">

              <normal-table
                :tableData="tableData4"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel4"
                :operationConfig="operationConfig"
                :operationList="operationList4"
                @event="handleEvent4"
                @changePage="changePage4"></normal-table>
            </div>
          </div>
        </div>


        <!-- 废弃处置 -->
        <div slot="5" class="addProductCarbonAccounting-content">
          <!-- 运输 -->
          <div>
            <div class="addProductCarbonAccounting-title">处理过程
              <el-button @click="addProcess()" size="small" type="primary" class="addProductCarbonAccounting-btn">
                添加工艺
              </el-button>
            </div>
            <div class="addProductCarbonAccounting-table">

              <normal-table
                :tableData="tableData4"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel4"
                :operationConfig="operationConfig"
                :operationList="operationList4"
                @event="handleEvent4"
                @changePage="changePage4"></normal-table>
            </div>
          </div>
        </div>

        <!-- 结果总览 -->
        <div slot="6" class="addProductCarbonAccounting-content">
          <!-- 运输 -->
          <div>
            <div class="addProductCarbonAccounting-title">运输</div>
            <div class="addProductCarbonAccounting-table">

              <normal-table
                :tableData="tableData4"
                :paginationConfig="paginationConfig"
                :tableLabel="tableLabel4"
                :operationConfig="operationConfig"
                :operationList="operationList4"
                @event="handleEvent4"
                @changePage="changePage4"></normal-table>
            </div>
          </div>
        </div>
      </tab-helper>
    </div>
  </div>
</template>

<script>
import TabHelper from '@/components/TabHelper'
import NormalForm from '@/components/NormalForm'
import NormalTable from '@/components/NormalTable'
import NormalFormPlus from '@/components/NormalFormPlus'

export default {
  components: {
    TabHelper,
    NormalForm,
    NormalFormPlus,
    NormalTable
  },
  data() {
    return {
      tableData1: [
        {
          fileName: '外壳',
          totalNum: '10kg',
          exportNum: '排放因子',
          errorNum: '0.002',
          errorNum1: '0.7',
          errorNum2: '0.729kgCO2e',
          errorNu3: '0.23',
          errorNum4: '--',
        },
      ],
      operationList1: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      tableLabel1: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "fileName",
          label: "名称",
          width: 100
        },
        {
          prop: "totalNum",
          label: "数量",
          width: 50
        },
        {
          prop: "exportNum",
          label: "匹配类型",
          width: 100
        },
        {
          prop: "errorNum",
          label: "因子/核算产品",
          width: 150
        },
        {
          prop: "errorNum1",
          label: "换算比例",
          width: 200
        },
        {
          prop: "errorNum2",
          label: "排放系数",
          width: 100
        },
        {
          prop: "errorNum3",
          label: "排放量(kgCO2e)",
          width: 100
        },
        {
          prop: "errorNum4",
          label: "备注",
          width: 100
        }

      ],
      /////////////
      tableData2: [
        {
          fileName: '电力',
          totalNum: '10kwh',
          exportNum: '排放因子',
          errorNum: '电力',
          errorNum1: '0.7',
          errorNum2: '0.729kgCO2e',
          errorNu3: '1.43',
          errorNum4: '--',
        },
      ],
      operationList2: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      tableLabel2: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "fileName",
          label: "能耗名称",
          width: 100
        },
        {
          prop: "totalNum",
          label: "数量",
          width: 50
        },
        {
          prop: "exportNum",
          label: "匹配类型",
          width: 100
        },
        {
          prop: "errorNum",
          label: "因子/核算产品",
          width: 150
        },
        {
          prop: "errorNum1",
          label: "换算比例",
          width: 200
        },
        {
          prop: "errorNum2",
          label: "排放系数",
          width: 100
        },
        {
          prop: "errorNum3",
          label: "排放量(kgCO2e)",
          width: 100
        },
        {
          prop: "errorNum4",
          label: "备注",
          width: 100
        }

      ],
      /////////////
      tableData3: [
        {
          fileName: '制浆',
          totalNum: '纸浆',
          exportNum: '243',
          errNum: '-'
        },
      ],
      operationList3: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      tableLabel3: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "fileName",
          label: "工艺名称",
          width: 200
        },
        {
          prop: "totalNum",
          label: "产物",
          width: 200
        },
        {
          prop: "exportNum",
          label: "排放量(kgCO2e)",
          width: 200
        },
        {
          prop: "errNum",
          label: "描述",
          width: 260
        }

      ],
      /////////////
      tableData4: [
        {
          fileName: '电动货车',
          totalNum: '10kg',
          exportNum: '1km',
          errNum: '电动货车平均道路交通(货运)',
          errNum1: '0.02',
          errNum2: '0.729',
          errNum3: '0.23',
          errNum4: '-',

        },
      ],
      operationList4: [
        {
          name: '编辑',
          order: 1,
          buttonClass: 'primary',
          plus: {}
        },
        {
          name: '删除',
          order: 2,
          buttonClass: 'danger',
          plus: {}
        }
      ],
      tableLabel4: [
        {
          prop: "order",
          label: "序号",
          width: 70
        },
        {
          prop: "fileName",
          label: "运输方式",
          width: 200
        },
        {
          prop: "totalNum",
          label: "运输毛重",
          width: 200
        },
        {
          prop: "exportNum",
          label: "运输距离",
          width: 200
        },
        {
          prop: "errNum",
          label: "排放因子",
          width: 100
        },
        {
          prop: "errNum1",
          label: "换算比例",
          width: 100
        },
        {
          prop: "errNum2",
          label: "排放系数",
          width: 100
        },
        {
          prop: "errNum3",
          label: "排放量(kgCO2e)",
          width: 100
        },
        {
          prop: "errNum4",
          label: "备注",
          width: 50
        }

      ],

      operationConfig: {select: false},
      paginationConfig: {
        total: 100,
        page: 1,
        pageSize: 10,
        show: true
      },
      // tab栏配置
      paneList: [
        {
          id: '1',
          label: '原材料获取'
        },
        {
          id: '2',
          label: '生产制造'
        },
        {
          id: '3',
          label: '分销零售'
        },
        {
          id: '4',
          label: '使用'
        },
        {
          id: '5',
          label: '废弃处置'
        },
        {
          id: '6',
          label: '结果总览'
        },
      ],
    }
  },
  methods: {
    addProcess() {

    },
    add() {
      this.$router.push("/addEmissionSource")
    },

    handleEvent1() {
    },
    changePage1() {
    },

    handleEvent2() {
    },
    changePage2() {
    },

    handleEvent3() {
    },
    changePage3() {
    },

    handleEvent4() {
    },
    changePage4() {
    },
  }
}
</script>

<style lang="less" scoped>
.addProductCarbonAccounting-content {
  height: 200vh;
  width: 90vw;

  .addProductCarbonAccounting-title {
    padding-left: 10px;
    padding-top: 20px;
    font-size: 18px;
    font-weight: bold;
  }

  .addProductCarbonAccounting-table {
    height: 200px;
  }

  .addProductCarbonAccounting-btn {
    margin-left: 50px;
  }
}

</style>
